<template>
  <div class="contain" ref="appRef">
    <div class="top-title">
      <div class="top-title-text">
        智慧广电中和信息平添——龙泉
      </div>
      <div class="tab-box">
        <div v-for="(item, tabIndex) in tabItemList" :key="tabIndex"
          :class="{ 'tab-item': true, 'tab-active': tabIndex === tabActiveIndex }" @click="changeTabItem(tabIndex)">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="map-container">
      <div class="map" id="map">
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted,nextTick } from 'vue'
import { useMain } from "@/utils/ScreenApt.js"
import { useRouter } from "vue-router"
import { useStore } from "vuex"
const store = useStore()
const router=useRouter()
const { proxy } = getCurrentInstance();
const tabItemList = ref(["首页", "应急广播", "雪亮工程", "公共服务"])
const tabActiveIndex = ref(0)
const appRef = ref()
//地图对象
const map = ref()
//定义地图的坐标
const center = ref([104.280751, 30.597593])
//地图执行函数
const initMap = () => {
  //定义地图
  let amap = new AMap.Map("map", {
    center: center.value,
    //地图缩放
    zoom: 11.5,
    //视图模式
    viewMode: "2d",
    //图册
    layers: [AMap.createDefaultLayer()],
    mapStyle: "amap://styles/darkblue"
  })
  //定义回调函数
  let complete = () => {
    districtSearch()
    amap.off("complete", complete)
  }
  //保存地图对象到vuex
  store.commit("SETMAP",amap)
  map.value = amap
  //调用事件 地图加载完成后执行
  amap.on('complete', complete)
}

//搜索行政区的方法
const districtSearch = () => {
  let district = new AMap.DistrictSearch({
    //等级
    level: "district",
    //返回行政区坐标点
    extensions: "all",
    //下级行政区集数
    subdistrict: 0
  })
  //查询方法
  district.search("龙泉驿区", function (status, result) {
    //覆盖物
    let polygons = []
    let bounds = result && result.districtList && result.districtList[0].boundaries
    console.log(bounds, 'ds');
    //遍历拿到点的坐标
    if (bounds) {
      for (let i = 0; i < bounds.length; i++) {
        //构造图形参数
        let polygon = new AMap.Polygon({
          path: bounds[i],
          strokeWeight: 1,
          fillOpacity: 0.2

        })
        //添加到坐标数值里
        polygons.push(polygon)
      }
      //添加到坐标对象
      map.value.add(polygons)
    }
  })
}

//点击方法
const changeTabItem = (tabIndex) => {
  tabActiveIndex.value = tabIndex
  let path = "/main/page"+tabIndex
  router.push(path)
}
onMounted(() => {
    let obj={
      "/main/page0":0,
      "/main/page1":1,
      "/main/page2":2,
      "/main/page3":3,
    }
if (obj[proxy.$route.path]) {
  tabActiveIndex.value=obj[proxy.$route.path]
}

  const { calcRate, windowDraw } = useMain(appRef.value)
  calcRate()
  windowDraw()
  initMap()
  //窗口关闭方法
  window.closeWindow=()=>{
    store.state.infoWindow.close()
  }
})
</script>
<style lang="less" scoped>
@import "@/styles/font.less";

.contain {
  width: 1920px;
  height: 1080px;
  background: url("@/assets/imgs/contain-bg.png");
  color: white;
  transform-origin: 0 0;
}

.top-title {
  width: 100%;
  height: 110px;
  background-image: url("@/assets/imgs/pageBigHome_top.png");
  background-size: 102%;
  background-position: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.top-title-text {
  font-family: YouSheBiaoTiHei;
  font-style: normal;
  font-weight: normal;
  font-size: 38px;
  margin-bottom: 30px;
  line-height: 30px;
  text-align: center;
  margin-left: 30px;
  background: linear-gradient(to top, #87DAFF, #FFFFFF);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  cursor: pointer;
}

.tab-box {
  width: 777px;
  height: 47px;
  margin-bottom: 45px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 220px;
}

.tab-item {
  width: 160px;
  height: 47px;
  line-height: 47px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  background-image: url("@/assets/imgs/nav-item-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.tab-active {
  background-image: url("@/assets/imgs/nav-item-bg-active.png");
}

.map {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
}
</style>